<template>
  <div class="container">
    {{ sum }}
    {{ messgae }}
    {{ person }}
  </div>
  <button @click="changeSUM">改变sum</button>
  <button @click="changeMessage">改变message</button>
  <button @click="changePerson">改变person</button>
</template>

<script>
import {reactive, ref, watch} from "vue";//引入ref实现响应式
export default {
  name: 'App',
  components: {},
  setup() {
    let sum = ref(0)
    let messgae = ref('hello')
    let person = reactive({
      name: 'Jack',
      age: 18,
      job: {
        type: '前端工程师',
        salary: '20K'
      }
    })

    function changeSUM() {
      sum.value += 1
    }

    function changeMessage() {
      messgae.value = 'no hello'
    }

    function changePerson() {
      person.name = '曾宇杰'
      person.job.type = 'UI'
      person.job.salary = '100k'

    }

    //情况一：监视ref定义的属性
    // watch(sum, (newValue, oldValue) => {
    //   console.log("sum的值发生了改变", newValue, oldValue)
    // })
    //情况二：同时监视多个ref定义的属性  使用的是数组,值的变化也是数组
    watch([sum, messgae], (newValue, oldValue) => {
      console.log(`sum的值发生了改变,${newValue[0]},${oldValue[0]}`)
      console.log(`sum的值发生了改变,${newValue[1]},${oldValue[1]}`)
    })

    //情况三：监视reactive定义的响应数据的全部属性
    watch(person, (newValue, oldValue) => {
      console.log(`person的值发生了改变`)
      console.log(newValue)
      console.log(oldValue)//无法监视到旧的值,如果想要获取oldValue可以将想要获取的属性放到对象外面
    }, {deep: false}) //deep:false失效

    //情况四：监视reactive所定义的响应式数据的某个属性,得写成函数
    watch(() => person.name, (newVal, oldVal) => {
      console.log('person中的name变化了', newVal, oldVal);
    })
    //情况五：监视reactive所定义的响应式数据的某些属性,得写成函数
    watch([() => person.name, () => person.age], (newVal, oldVal) => {
      console.log('person中的name和age变化了', newVal[0], oldVal[0]);
    })
    //特殊情况：监视reactive所定义的响应式数据的对象类型属性
    // watch(() => person.job, (newVal, oldVal) => {
    //   console.log('person变化了', newVal, oldVal);
    // }, {deep: true})

    return {
      sum, messgae, person, changeSUM, changeMessage, changePerson
    }
  },

  //使用vue2的计算属性
  computed: {
    fullNameForVue2() {
      return this.person.firstName + '_' + this.person.lastName //使用vue2的计算属性,这里通过this拿到vue3的值
    }
  }


}
</script>

<style>
.container {
  width: 200px;
  background-color: gray;
  margin: auto;
}
</style>
